<template>
    <h4>sum:{{sum}}</h4>
    <button @click="sum++">+1</button>
    <hr />
    <h2>姓名:{{person.name}}</h2>
    <h2>年龄:{{person.age}}</h2>
    <h2>薪资:{{person.job.j1.salary}}</h2>
    <button @click="person.name += '~'">修改名字</button>
    <button @click="person.age++">增加年龄</button>
    <button @click="person.job.j1.salary++">涨薪</button>
    <button @click="showToRawPerson">输出最原始的person</button>
    <h4 v-show="person.car">车: {{person.car}}</h4>
    <button @click="addCar">添加一个car属性</button>
</template>

<script>
import { ref,reactive, toRaw, markRaw } from 'vue'
export default {
    name: 'App',
    components:{},
    setup(){
        let sum = ref(0)
        let person = reactive({
            name: '张三',
            age: 18,
            job: {
                j1: {
                    salary: 1
                }
            }
        })

        function showToRawPerson(){
            const p = toRaw(person)
            p.age++//js 变回普通对象增加年龄
            console.log(p)
        }
        function addCar(){
            let car = {name: '奔驰',price: '40W'}
            person.car = markRaw(car)
        }
        return{
            sum,
            person,showToRawPerson,addCar,
        }
    }
}
</script>

<style>

</style>